import React, { Component } from "react";
import Button from "./Button";
import Product from "./Product";
import NewsMain from "./NewsMain"
import  Details from './project_details'
import Home from "./Home";
import NewsDetails from "./Newsdetails";
import Comments from "./Comments";
import Cart from "./Productcart"
import {login,toLogin} from '../action/counter.js';
import {connect } from 'react-redux';
import { browserHistory } from 'react-router';
import { setcookie, getcookie, delcookie } from "./cookie";
import { HashRouter as Router, Route, NavLink, Switch } from "react-router-dom";
class Header extends Component{
    HtoLogin(){
        this.props.toLogin(1);
    }
    
    quit(){
        this.props.login('');
        delcookie("name");
        $(location).prop('href','http://localhost:8080/#')
    }
    render (){
        var btn = {
            width: 150,
            height: 32,
            fontSize: "13px",
            font: "To Shopping"
          };
          var btn3 = {
            width: 80,
            height: 32,
            fontSize: "11px",
            font: "Login"
          };
        var userA;
        if(getcookie("name")){
            userA=(<span>Welcome {getcookie("name")} ,<a href="javascript:;" className="esc" onClick={this.quit.bind(this)}>back</a></span>)
        }else{
            userA=(<NavLink to="/" onClick={this.HtoLogin.bind(this)}><Button {...btn3}/></NavLink>)
        }
      return (<Router>
        <div>
          <div className="mainHeader">
            <div id="logo" ></div>
            <ul className="nav main_nav">
              <li className="nav-item">
                <NavLink to="/" >
                  HOME
                </NavLink>
              </li>
              <li className="nav-item">
                <NavLink to="/news">
                  NEWS
                </NavLink>
              </li>
              
              <li className="nav-item">
                <NavLink to="/cart" >
                  Cart
                </NavLink>
              </li>
            </ul>
            <div className="reserve">
              {userA}
              <NavLink to="/product">
                <Button {...btn} />
              </NavLink>
            </div>
          </div>
          <Switch>
            <Route exact={true} path="/" component={Home} />
            <Route path="/news" component={NewsMain} />
            <Route path="/product" component={Product} />
            <Route path="/productd" component={Details} />
            <Route path="/newsdetail" component={NewsDetails} />
            <Route path="/comments" component={Comments} />
            <Route path="/cart" component={Cart} />
            
          </Switch>
        </div>
      </Router>)
    }
  }
  const mapStateToProps=(state)=>{
    return{
        name:state.name,
        tologin:state.tologin
    }
  }
  export default connect(mapStateToProps,{login,toLogin})(Header)